<template>
    <div>
        <el-dialog :title="title" @close="handleClose" :visible="visible" width="900px" center
            :close-on-click-modal="false">
            <el-form :model="formInline" :rules="rules" ref="formInline" :label-width="labelWidth" :disabled="disabled"
                class="demo-formInline">
                <p class="title_txt">填写商家注册信息</p>
                <el-form-item label="营业执照：" prop="businessLicenseImg" ref="businessLicenseImgRef" :key="1">
                    <ImageUploadMore :limit="1" :fileSize="20" @successImg="getBusinessLicenseImg"
                        :value="formInline.businessLicenseImg">
                    </ImageUploadMore>
                </el-form-item>
                <el-form-item label="统一社会信用代码：" prop="businessLicenseNumber">
                    <el-input v-model="formInline.businessLicenseNumber" placeholder="请输入"
                        :style="{ width: inputWidth }"></el-input>
                </el-form-item>
                <el-form-item label="企业名称：" prop="merchantName">
                    <el-input v-model="formInline.merchantName" placeholder="请输入" :style="{ width: inputWidth }"></el-input>
                </el-form-item>
                <el-form-item label="法人名称：" prop="name">
                    <el-input v-model="formInline.name" placeholder="请输入" :style="{ width: inputWidth }"></el-input>
                </el-form-item>
                <el-form-item label="注册地址：" prop="address">
                    <el-input v-model="formInline.address" placeholder="请输入" :style="{ width: inputWidth }"></el-input>
                </el-form-item>
                <el-form-item label="企业类别：" prop="merchantType">
                    <el-select v-model="formInline.merchantType" placeholder="请选择" filterable @change="merchantTypeChange"
                        :style="{ width: inputWidth }">
                        <el-option v-for="item in merchantOptions" :key="item.id" :label="item.value" :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="成立日期：" prop="businessLicenseStartDate">
                    <el-date-picker v-model="formInline.businessLicenseStartDate" type="date" placeholder="选择日期"
                        format="yyyy.MM.dd" value-format="yyyy.MM.dd" :clearable="false" :style="{ width: inputWidth }">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="经营期限：" prop="businessLicenseEndDate">
                    <el-radio-group v-model="radiodDate">
                        <el-radio :label="'1'">期限</el-radio>
                        <el-date-picker v-model="formInline.qxDate" type="date" placeholder="选择日期" format="yyyy.MM.dd"
                            style="width: 208px;" value-format="yyyy.MM.dd" :clearable="false"
                            :disabled="radiodDate == '2' ? true : false" @change="qxDateChange">
                        </el-date-picker>
                        <el-radio :label="'2'" style="margin-left: 10px;">长期</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="注册资金：" prop="registeredFund" v-if="formInline.merchantType=='1'">
                    <el-input v-model="formInline.registeredFund" placeholder="请输入"
                        :style="{ width: inputWidth }"></el-input>
                </el-form-item>
                <!-- <el-form-item label="法人联系电话：" prop="">
                    <el-input v-model="formInline.businessLicence" placeholder="请输入"
                        :style="{ width: inputWidth }"></el-input>
                </el-form-item> -->
                <p class="title_txt">填写商家店铺信息</p>
                <el-form-item label="店铺门头照：" prop="shopTopImg" ref="shopTopImgRef">
                    <ImageUploadMore :limit="1" :fileSize="20" @successImg="getShopTopImg" :value="formInline.shopTopImg">
                    </ImageUploadMore>
                </el-form-item>
                <el-form-item label="店铺名称：" prop="shopName">
                    <el-input v-model="formInline.shopName" placeholder="请输入" :style="{ width: inputWidth }"></el-input>
                </el-form-item>
                <el-form-item label="店铺区域：" prop="regionAvalue">
                    <el-cascader :options="regionOptions" filterable
                        :props="{ value: 'id', label: 'label', children: 'children' }" v-model="formInline.regionAvalue"
                        :style="{ width: inputWidth }">
                    </el-cascader>
                </el-form-item>
                <el-form-item label="店铺类型：" prop="shopAvalue">
                    <el-cascader v-model="formInline.shopAvalue" filterable :style="{ width: inputWidth }"
                        :props="{ value: 'id', label: 'label', children: 'children' }" :options="shopTypeLs"
                        :show-all-levels="false"></el-cascader>
                </el-form-item>
                <!-- <el-form-item label="店铺定位：" prop="locateAddress" :label-width="labelWidth" key="5">
                    <span class="fontsize">{{ formInline.locateAddress }}</span>
                    <el-input v-model="formInline.locateAddress" :disabled="true" v-show="false"></el-input>
                    <span class="fontsize" @click="modelMsg = true" v-if="type != 'watch'"
                        style="color: #1890ff; margin-left: 30px; cursor: pointer">点击定位地址</span>
                </el-form-item> -->
                <el-form-item label="店铺地址：" prop="locateAddress">
                    <el-input v-model="formInline.locateAddress" placeholder="请输入" :style="{ width: inputWidth }"></el-input>
                </el-form-item>
                <el-form-item label="店铺经纬度坐标：" prop="lntLat">
                    <el-input v-model="formInline.lntLat" placeholder="请输入" :style="{ width: inputWidth }"></el-input>
                    <el-button @click="guUrl()" type="primary" size="small" style="margin-left: 20px">获取经纬度坐标</el-button>
                </el-form-item>
                <el-form-item label="详细地址：" prop="shopAddress">
                    <el-input v-model="formInline.shopAddress" placeholder="请输入" :style="{ width: inputWidth }"></el-input>
                </el-form-item>
                <el-form-item label="营业时间：" required :label-width="labelWidth">
                    <el-col :span="8">
                        <el-form-item prop="startTime" key="7">
                            <el-time-select v-model="formInline.startTime" placeholder="开始时间" :picker-options="{
                                start: '00:00',
                                step: '00:10',
                                end: '23:59',
                            }">
                            </el-time-select>
                        </el-form-item>
                    </el-col>
                    <el-col class="line" :span="1">-</el-col>
                    <el-col :span="11">
                        <el-form-item prop="endTime" key="8">
                            <el-time-select v-model="formInline.endTime" placeholder="结束时间" :picker-options="{
                                start: '00:00',
                                step: '00:10',
                                end: '23:59',
                            }">
                            </el-time-select>
                        </el-form-item>
                    </el-col>
                </el-form-item>
                <el-form-item label="每周营业日：" required prop="weekTime" :label-width="labelWidth" key="9">
                    <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选
                    </el-checkbox>
                    <el-input v-model="formInline.weekTime" placeholder="请输入店铺名称" v-show="false"></el-input>
                    <div style="margin: 15px 0"></div>
                    <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
                        <el-checkbox v-for="dayItem in cities" :label="dayItem" :key="dayItem">{{
                            dayItem
                        }}</el-checkbox>
                    </el-checkbox-group>
                </el-form-item>
                <p class="title_txt">填写商家结算信息</p>
                <el-form-item label="赚卡服务费：" prop="equityFee" key="10">
                    <el-input v-model="formInline.equityFee" placeholder="请输入" :style="{ width: inputWidth }">
                        <template slot="append">%</template>
                    </el-input>
                </el-form-item>
                <el-form-item label="赚卡结算方式：" required prop="" key="11">
                    <el-radio-group v-model="formInline.equityCardSettleType">
                        <el-radio :label="'1'">门店自行结算</el-radio>
                        <el-radio :label="'2'">结算到其他门店</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="结算门店：" prop="equityCardSettleMerchantId" v-if="formInline.equityCardSettleType == '2'"
                    key="12">
                    <el-select v-model="formInline.equityCardSettleMerchantId" placeholder="请选择" filterable
                        :style="{ width: inputWidth }">
                        <el-option v-for="item in shopOptions" :key="item.merchantId" :label="item.shopName"
                            :value="item.merchantId">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="结算方式：" prop="settleBankType" key="13">
                    <el-select filterable v-model="formInline.settleBankType" placeholder="请选择" clearable
                        :style="{ width: inputWidth }">
                        <el-option v-for="item in settleBankTypeLs" :key="item.id" :label="item.value" :value="item.id" />
                    </el-select>
                </el-form-item>
                <template v-if="formInline.settleBankType != '' && formInline.settleBankType != undefined">
                    <el-form-item label="开户名称：" prop="settleName" key="14">
                        <el-input v-model="formInline.settleName" placeholder="请输入"
                            :style="{ width: inputWidth }"></el-input>
                    </el-form-item>
                    <el-form-item label="银行名称：" prop="accountName" key="15">
                        <el-input v-model="formInline.accountName" placeholder="请输入"
                            :style="{ width: inputWidth }"></el-input>
                    </el-form-item>
                    <el-form-item label="开户行卡号：" prop="accountNo" key="16">
                        <el-input v-model="formInline.accountNo" placeholder="请输入"
                            :style="{ width: inputWidth }"></el-input>
                    </el-form-item>
                    <el-form-item label="所属开户行：" prop="bankName" key="17">
                        <el-input v-model="formInline.bankName" placeholder="请输入" :style="{ width: inputWidth }"></el-input>
                    </el-form-item>
                    <el-form-item label="开户许可证：" prop="permitForBankAccount" ref="permitForBankAccountRef" key="18"
                        v-if="formInline.settleBankType == 1">
                        <ImageUploadMore :limit="1" :fileSize="20" @successImg="getPermitForBankAccount"
                            :value="formInline.permitForBankAccount">
                        </ImageUploadMore>
                    </el-form-item>
                    <el-form-item label="银行预留手机号：" prop="bankMobile" key="19" v-if="formInline.settleBankType != 1">
                        <el-input v-model="formInline.bankMobile" placeholder="请输入" maxlength="11"
                            :style="{ width: inputWidth }"></el-input>
                    </el-form-item>
                    <el-form-item label="银行卡正面：" prop="bankCard" ref="bankCardRef" key="20"
                        v-if="formInline.settleBankType != 1">
                        <ImageUploadMore :limit="1" :fileSize="20" @successImg="getBankCard" :value="formInline.bankCard">
                        </ImageUploadMore>
                    </el-form-item>
                    <el-form-item label="银行卡反面：" prop="bankCardBack" ref="bankCardBackRef" key="21"
                        v-if="formInline.settleBankType != 1">
                        <ImageUploadMore :limit="1" :fileSize="20" @successImg="getBankCardBack"
                            :value="formInline.bankCardBack">
                        </ImageUploadMore>
                    </el-form-item>
                    <el-form-item label="法人授权函信息：" prop="authorization" ref="authorizationRef" key="22"
                        v-if="formInline.settleBankType == 3">
                        <ImageUploadMore :limit="1" :fileSize="20" @successImg="getAuthorization"
                            :value="formInline.authorization">
                        </ImageUploadMore>
                    </el-form-item>
                </template>
                <!-- 备用结算信息（企业商户对法人私卡结算时，需要填写备用结算信息） -->
                <template v-if="formInline.merchantType=='1' && formInline.settleBankType=='2'">
                  <p class="standby_txt">备用结算信息：（请填写对公账户信息）</p>
                  <el-form-item label="结算账号：" prop="standStlAccNo" key="23">
                        <el-input v-model="formInline.standStlAccNo" placeholder="请输入" :style="{ width: inputWidth }"></el-input>
                        <el-button style="margin-left: 30px" type="primary" size="small" @click="openingBankStand(formInline.standStlAccNo)" :loading="mateLoading">查询匹配开户行</el-button>
                  </el-form-item>
                  <el-form-item label="开户行名称：" prop="localStandBankName" key="24">
                    <el-input v-model="formInline.localStandBankName" placeholder="请输入" :disabled="formInline.standBankRegionAvalue.length==0?false:true" :style="{ width: inputWidth }"></el-input>
                    <el-tooltip class="item" effect="dark" content="如需更改开户行，请先删除银行地区" placement="top-start" v-if="formInline.standBankRegionAvalue.length!=0">
                        <div class="el-icon-question" style="color: red;margin-left: 10px;cursor: pointer"></div>
                    </el-tooltip>
                </el-form-item>
                  <el-form-item label="银行地区：" prop="standBankRegionAvalue" ref="standBankRegionAvalueRef" key="25">
                    <el-cascader :options="bankCityOptions" :props="{ value: 'id',label: 'label',children: 'children'}"
                        filterable @change="standBankRegionChange" v-model="formInline.standBankRegionAvalue" clearable :style="{ width: inputWidth }">
                    </el-cascader>
                  </el-form-item>
                  <el-form-item label="所属支行名称：" prop="standBankSubCode" key="26">
                    <el-select v-model="formInline.standBankSubCode" placeholder="请选择" filterable @change="changesTwoStand" v-loading="viewLoading" element-loading-text="支行加载中" :style="{ width: inputWidth }">
                        <el-option v-for="item in bankOptiontwoStand" :key="item.bankCode" :label="item.bankName" :value="item.bankCode"></el-option>
                    </el-select>
                  </el-form-item>
                </template>
            </el-form>
            <div class="button_box" v-if="type != 'watch'">
                <el-button style="margin-right: 30px" @click="handleClose">取消</el-button>
                <el-button type="primary" :loading="buttonLoading" @click="sumitAdd('formInline')"
                    v-if="type == 'add'">确认添加</el-button>
                <el-button type="primary" :loading="buttonLoading" @click="clickEdit('formInline')"
                    v-if="type == 'edit'">确认修改</el-button>
            </div>
        </el-dialog>
        <!-- 地图定位 -->
        <el-dialog title="选择定位" :visible.sync="modelMsg" :close-on-click-modal="false">
            <div class="msgDiv">
                <el-autocomplete style="width: 80%; margin-right: 10px" class="inline-input" v-model="mapAddress"
                    :fetch-suggestions="watchInput" placeholder="请输入内容" :trigger-on-focus="false" @select="handleSelect">
                </el-autocomplete>
                <div id="container" style="margin-top: 20px"></div>
                <div class="dialog_bottom">
                    <el-button style="margin-right: 60px" @click="modelMsg = false">取消</el-button>
                    <el-button type="primary" @click="determine">确定</el-button>
                </div>
            </div>
        </el-dialog>
    </div>
</template>
<script>
// api
import {
    licenseInfo, watermarkUploadFile,bankCity,entryV1FuncYSBankBin,bankBranch,
} from "@/api/chainManagement";
import {
    shopApplyAdd, shopApplyDetail, shopApplyUpdate
} from "@/api/syChainManagement/syChainManagement.js";
import { getCity } from "@/api/clientManagement";
import { shopTypeTree } from "@/api/merchants";
import { settleShopSelect } from "@/api/syChainManagement/syChainManagement.js";
export default {
    props: {
        visible: Boolean,
        id: String,
        type: String,
    },
    data() {
        var checkBusinessLicenseEndDate = (rule, value, callback) => {
            if (this.radiodDate == '1' && (value === '' || value == undefined)) {
                callback(new Error('请选择经营期限'));
            } else {
                callback();
            }
        };
        var checkWeekTime = (rule, value, callback) => {
            if (!value) {
                return callback(new Error('请选择每周营业日'));
            } else {
                callback();
            }
        };
        var checkNum = (rule, value, callback) => {
            if (value < 0) {
                return callback(new Error('只可填写数值（0-100），可保留两位小数'));
            } else if (value > 100) {
                return callback(new Error('只可填写数值（0-100），可保留两位小数'));
            } else {
                callback();
            }
        };
        return {
            labelWidth: '150px',
            inputWidth: '290px',
            title: '添加新门店',//
            viewLoading: false,
            loading: false,
            mapAddress: '',//地图定位地址
            regionOptions: [],//城市数组
            shopOptions: [],//结算门店下拉
            avalue: '',
            shopTypeLs: [],//店铺类型数组
            radiodDate: '1',//经营期限类型 1：期限  2：长期
            formInline: {
                watermarkBusinessLicenseImg: '',//营业执照图片(水印营业执照)
                businessLicenseImg: '',//营业执照图片
                businessLicenseNumber: '',//营业执照号
                merchantName: '',//企业名称
                name: '',//法人姓名
                address: '',//注册地址
                merchantType: '',//企业类型（1 企业 2个人）
                businessLicenseStartDate: '',//营业执照成立日期
                businessLicenseEndDate: '',//营业执照经营期限
                qxDate: '',//经营期限(校验用)
                registeredFund: '',//注册资金
                shopTopImg: '',//店铺门头照
                shopName: '',//店铺名称
                regionAvalue: [],//区域数组（校验用）
                merchantArea: '',//商家区
                merchantCity: '',//商家市
                merchantProvince: '',//商家省
                shopAvalue: [], //店铺类型（检验用）
                shopType: '',//店铺类型子类型
                shopTypeName: '',//店铺类型子类型名称
                shopTypeParent: '',//店铺类型父类型
                locateAddress: '',//定位地址
                shopLat: '',//店铺纬度
                shopLnt: '',//店铺经度
                shopAddress: '',//详细地址
                endTime: '',//营业结束时间
                startTime: '',//营业开始时间
                weekTime: '',//营业周期
                isSkip: '1',//是否跳过收款帐号信息录入 1 跳过 2 不跳过
                equityFee: '',//售卡服务费率
                equityCardSettleType: '1',//赚卡结算方式
                equityCardSettleMerchantId: '',//结算门店
                accountName: '',//开户银行
                accountNo: '',//开户账号
                bankName: '',//开户银行支行
                settleName: '',//开户名称
                bankMobile: '',//银行预留手机号
                bankCard: '',//银行卡正面
                bankCardBack: '',//银行卡背面
                authorization: '',//法人授权函
                settleBankType:'',//结算类型
                localStandBankName:'',//备用结算银行名称
                localStandBankSubName:'',//备用结算银行支行名称
                standBankCity:'',//备用结算账户银行开户行市代码
                standBankProvince:'',//备用结算账户银行开户行省代码
                standBankSubCode:'',//备用结算账户开户行支行编号
                standStlAccNo:'',//备用结算账号
                standBankRegionAvalue:[],//银行城市回显
            },
            rules: {
                businessLicenseImg: [{
                    required: true,
                    message: '请上传营业执照',
                    trigger: ['blur', 'change']
                }],
                businessLicenseNumber: [{
                    required: true,
                    message: '请输入营业执照号',
                    trigger: ['blur', 'change']
                }],
                merchantName: [{
                    required: true,
                    message: '请输入企业名称',
                    trigger: ['blur', 'change']
                }],
                name: [{
                    required: true,
                    message: '请输入法人姓名',
                    trigger: ['blur', 'change']
                }],
                address: [{
                    required: true,
                    message: '请输入注册地址',
                    trigger: ['blur', 'change']
                }],
                merchantType: [{
                    required: true,
                    message: '请选择企业类别',
                    trigger: ['blur', 'change']
                }],
                businessLicenseStartDate: [{
                    required: true,
                    message: '请选择成立日期',
                    trigger: ['change', 'blur']
                }],
                businessLicenseEndDate: [{
                    required: true,
                    // message: '请选择经营期限',
                    validator: checkBusinessLicenseEndDate,
                    trigger: ['change', 'blur']
                }],
                registeredFund: [{
                    required: true,
                    message: '请输入注册资金',
                    trigger: ['blur', 'change']
                }],
                shopTopImg: [{
                    required: true,
                    message: '请上传店铺门头照',
                    trigger: ['change', 'blur']
                }],
                shopName: [{
                    required: true,
                    message: '请输入店铺名称',
                    trigger: ['blur', 'change']
                }],
                regionAvalue: [{
                    required: true,
                    message: '请选择店铺区域',
                    trigger: ['blur', 'change']
                }],
                shopAvalue: [{
                    required: true,
                    message: '请选择店铺类型',
                    trigger: ['blur', 'change']
                }],
                locateAddress: [{
                    required: true,
                    message: '请选择定位地址',
                    trigger: ['blur', 'change']
                }],
                shopAddress: [{
                    required: true,
                    message: '请输入详细地址',
                    trigger: ['blur', 'change']
                }],
                startTime: [{
                    required: true,
                    message: '请选择营业开始时间',
                    trigger: ['blur', 'change']
                }],
                endTime: [{
                    required: true,
                    message: '请选择营业结束时间',
                    trigger: ['blur', 'change']
                }],
                weekTime: [{
                    // required: true,
                    validator: checkWeekTime,
                    // message: '请选择每周营业日',
                    trigger: ['blur', 'change']
                }],
                equityFee: [
                    { required: true, message: '请输入赚卡服务费', trigger: ['change', 'blur'] },
                    {
                        pattern: /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/,
                        message: '只可填写数值（0-100），可保留两位小数'
                    },
                    { validator: checkNum }
                ],
                equityCardSettleMerchantId: [{
                    required: true,
                    message: '请选择结算门店',
                    trigger: ['blur', 'change']
                }],
                settleName: [{
                    required: true,
                    message: '请输入开户名称',
                    trigger: ['blur', 'change']
                }],
                accountName: [{
                    required: true,
                    message: '请输入银行名称',
                    trigger: ['blur', 'change']
                }],
                accountNo: [{
                    required: true,
                    message: '请输入开户行卡号',
                    trigger: ['blur', 'change']
                }],
                bankName: [{
                    required: true,
                    message: '请输入所属开户行',
                    trigger: ['blur', 'change']
                }],
                permitForBankAccount: [{
                    required: true,
                    message: '请上传开户许可证',
                    trigger: ['blur', 'change']
                }],
                bankMobile: [{
                    required: true,
                    message: '请输入银行预留手机号',
                    trigger: ['blur', 'change']
                }],
                bankCard: [{
                    required: true,
                    message: '请上传银行卡正面',
                    trigger: ['blur', 'change']
                }],
                bankCardBack: [{
                    required: true,
                    message: '请上传银行卡反面',
                    trigger: ['blur', 'change']
                }],
                authorization: [{
                    required: true,
                    message: '请上传法人授权函信息',
                    trigger: ['blur', 'change']
                }],
                standStlAccNo: [{
                    required: true,
                    message: '请输入结算账号',
                    trigger: ['blur', 'change']
                }],
                localStandBankName: [{
                    required: true,
                    message: '请输入开户行名称',
                    trigger: ['blur', 'change']
                }],
                standBankRegionAvalue: [{
                    required: true,
                    message: '选择银行地区',
                    trigger: ['change']
                }],
                standBankSubCode: [{
                    required: true,
                    message: '请选择所属支行名称',
                    trigger: ['blur', 'change']
                }],
                lntLat: [{
                    required: true,
                    message: '请输入经纬度',
                    trigger: ['blur', 'change']
                }],
            },
            merchantOptions: [
                { id: '1', value: '企业' }, { id: '2', value: '个人' },
            ],
            options: [
                { id: '1', value: '门店1' }, { id: '2', value: '门店2' },
            ],
            buttonLoading: false,
            chainId: "", //总店id
            status: 1,
            storeId: "", //关联门店id
            disabled: false,
            modelMsg: false, //显示模态框
            address: "", //输入的地址
            mapList: [], //用来存搜索到的所有地址
            mapVal: "", //创建的地图，赋值用
            fileType: [],
            checkedCities: [],
            checkAll: false,
            cities: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
            isIndeterminate: false,
            settleBankTypeLs: [], //结算方式
            bankCityOptions:[],//银行城市
            standBankRegionAvalue:[],//银行城市回显
            bankOptiontwoStand:[],//备用支行
            mateLoading: false,//查询匹配loading
        };
    },
    watch: {
        //监听模态框是否显示,显示就执行初始化地图方法
        modelMsg(newVal, oldVal) {
            console.log(newVal);
            if (newVal == true) {
                if (this.formInline.shopLat == '') {
                    this.initMap(20.049818248, 110.354108124);
                } else {
                    this.initMap(this.formInline.shopLat, this.formInline.shopLnt);
                }

            }
        },
    },
    created() {
        this.chainId = this.$route.query.id;
        this.getBankCitys()
        this.getCityView()
        this.getTypels()
        this.getDict()
        this.getSettleShopSelect()
        if (this.id && this.type == 'edit') {
            this.title = '编辑门店'
            this.lookDetail()
        } else if (this.id && this.type == 'watch') {
            this.title = '查看门店'
            this.lookDetail()
            this.disabled = true
        } else {
            this.title = '添加新门店'
        }
    },
    methods: {
        //获取字典
        getDict() {
            var dictType = "manage_settle_bank_type";
            this.$getSelectList(dictType)
                .then((res) => {
                    this.settleBankTypeLs = res.result[0].dictList;
                    this.settleBankTypeLs.splice(3, 3);
                })
                .finally(() => {
                    this.loading = false;
                });
        },
        // 企业类别选择
        merchantTypeChange(e) {
            this.formInline.settleBankType = ''
            // this.$set(this.formInline, 'settleBankType', '')
            if (e == 1) {
                this.settleBankTypeLs.splice(2, 1);
            } else {
                this.getDict()
            }
        },
        //获取营业执照
        getBusinessLicenseImg(e, file) {
            this.formInline.businessLicenseImg = e
            let data = new FormData();
            data.append("file", file.raw); // 文件对象
            watermarkUploadFile(data) //获取水印图片
                .then((res) => {
                    this.formInline.watermarkBusinessLicenseImg = res.result.url;
                })
                .catch(() => { });
            this.$refs['businessLicenseImgRef'].clearValidate();
            if (this.formInline.businessLicenseImg != '') {
                var params = {
                    url: this.formInline.businessLicenseImg
                }
                licenseInfo(params).then(res => {
                    if (res.result.businessLicenseEndDate == '长期') {
                        this.radiodDate = '2'
                        this.formInline.qxDate = ''
                        this.formInline.businessLicenseEndDate = '长期'
                    } else {
                        this.radiodDate = '1'
                        this.formInline.qxDate = res.result.businessLicenseEndDate
                    }
                    this.formInline = {
                        ...this.formInline,
                        ...res.result
                    }

                    if (this.formInline.merchantType == 1) {
                        this.settleBankTypeLs.splice(2, 1);
                    } else {
                        this.getDict()
                    }
                    // this.$set(this.formInline,)
                    this.$forceUpdate()
                })
            }
        },
        //经营期限选择
        qxDateChange() {
            this.formInline.businessLicenseEndDate = this.formInline.qxDate
        },
        //店铺门头照
        getShopTopImg(e) {
            this.formInline.shopTopImg = e
            this.$refs['shopTopImgRef'].clearValidate();
        },
        regionChange(value) { //城市区域选择
            this.formInline.province = value[0];
            this.formInline.city = value[1];
            this.formInline.area = value[2];
        },
        getCityView() { //查询城市数据
            const params = {};
            getCity(params)
                .then((res) => {
                    this.regionOptions = res.result;
                    this.regionOptions.forEach((item) => {
                        item.children.forEach((items) => {
                            items.children.forEach((itemss) => {
                                if (itemss.children.length == 0) {
                                    itemss.children = null
                                }
                            })
                        })
                    })
                })
                .finally(() => { });
        },
        // 获取店铺类型
        getTypels() {
            //shopTypeTree
            this.loading = true;
            shopTypeTree()
                .then((res) => {
                    this.shopTypeLs = res.result;
                    this.shopTypeLs.forEach((item) => {
                        item.children.forEach((items) => {
                            if (items.children.length == 0) {
                                items.children = null
                            }
                        })
                    })
                })
                .finally(() => { });
        },
        //营业日全选
        handleCheckAllChange(val) {
            this.checkedCities = val ? this.cities : [];
            this.isIndeterminate = false;
            if (val == true) {
                this.formInline.weekTime = "周一至周日";
            } else {
                this.formInline.weekTime = "";
            }

            console.log(this.formInline.weekTime);
        },
        //营业日选择
        handleCheckedCitiesChange(value) {
            let checkedCount = value.length;
            this.checkAll = checkedCount === this.cities.length;
            this.isIndeterminate =
                checkedCount > 0 && checkedCount < this.cities.length;
            let dataone = this.checkedCities.join("、");
            // let datatwo = dataone.split("周").join("");
            console.log('dataone', dataone)
            // console.log('datatwo',datatwo)
            if (dataone == "") {
                this.formInline.weekTime = "";
            } else if (dataone == "周一、周二、周三、周四、周五、周六、周日") {
                this.formInline.weekTime = "周一至周日";
            } else {
                // this.formInline.weekTime = "周" + datatwo;
                this.formInline.weekTime = dataone
            }
            console.log(this.formInline.weekTime);
        },
        handleSelect(item) { //地图搜索
            console.log(item);
            this.initMap(item.location.lat, item.location.lng);
            this.formInline.shopLnt = item.location.lng;
            this.formInline.shopLat = item.location.lat;
        },
        determine() { ////地图搜索确定
            this.formInline.locateAddress = this.mapAddress;
            this.modelMsg = false;
        },
        watchInput(queryString, cb) {
            console.log(queryString);
            const KEY = "IFRBZ-GZ2CQ-YHW5J-GSUGE-RC7VS-JBBWN";
            let url = "https://apis.map.qq.com/ws/place/v1/suggestion";
            let keyword = queryString; //传入的关键词
            this.$jsonp(url, {
                key: KEY,
                region: "全国",
                keyword: keyword,
                output: "jsonp",
            })
                .then((res) => {
                    let opt = [];
                    res.data.forEach((res) => {
                        let opt1 = {
                            value: res.title + "-" + res.address,
                            location: res.location,
                        };
                        opt.push(opt1);
                    });
                    this.mapList = opt;
                    // 调用 callback 返回建议列表的数据
                    cb(this.mapList);
                })
                .catch((err) => {
                    console.log(err);
                });
        },
        initMap(lat, lng) {
            //如果地图存在，就销毁，下面会重新创建一个
            if (this.mapVal) {
                this.mapVal.destroy();
            }
            //定义地图中心点坐标
            //this.$nextTick是等Dom加载完再执行
            this.$nextTick(() => {
                var center = new window.TMap.LatLng(lat, lng);
                //定义map变量，调用 TMap.Map() 构造函数创建地图
                this.mapVal = new TMap.Map(document.getElementById("container"), {
                    center: center, //设置地图中心点坐标
                    zoom: 17.2, //设置地图缩放级别
                    pitch: 43.5, //设置俯仰角
                    rotation: 45, //设置地图旋转角度
                    viewMode: "2D",
                    mapStyleId: "style1", //个性化样式
                });
                //初始化marker
                var marker = new TMap.MultiMarker({
                    id: "marker-layer", //图层id
                    map: this.mapVal,
                    styles: {
                        //点标注的相关样式
                        marker: new TMap.MarkerStyle({
                            width: 25,
                            height: 35,
                            anchor: {
                                x: 16,
                                y: 32,
                            },
                            src: "https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/markerDefault.png",
                        }),
                    },
                    geometries: [{
                        //点标注数据数组
                        id: "demo",
                        styleId: "marker",
                        position: new TMap.LatLng(lat, lng),
                        properties: {
                            title: "marker",
                        },
                    },],
                });
            });
        },
        //结算门店下拉框
        getSettleShopSelect() {
            var data = {
                chainId: this.chainId,
                id: this.id
            }
            settleShopSelect(data)
                .then((res) => {
                    this.shopOptions = res.result
                })
                .catch(() => { });
        },
        //获取开户许可证
        getPermitForBankAccount(e) {
            this.formInline.permitForBankAccount = e
            this.$refs['permitForBankAccountRef'].clearValidate();
        },
        //银行卡正面
        getBankCard(e) {
            this.formInline.bankCard = e
            this.$refs['bankCardRef'].clearValidate();
        },
        //银行卡反面
        getBankCardBack(e) {
            this.formInline.bankCardBack = e
            this.$refs['bankCardBackRef'].clearValidate();
        },
        //法人授权函
        getAuthorization(e) {
            this.formInline.authorization = e
            this.$refs['authorizationRef'].clearValidate();
        },
        //查看详情
        lookDetail() {
            let id = this.id;
            shopApplyDetail(id).then((res) => {
                this.formInline = res.result;
                this.$set(this.formInline,'standBankRegionAvalue',[])
                //处理企业类型时结算方式字典显示类型
                if (res.result.merchantType == '1') {
                    this.settleBankTypeLs.splice(2, 1);
                }
                // 处理是否跳过
                if (this.formInline.settleBankType == '' || this.formInline.settleBankType == undefined) {
                    this.formInline.isSkip = '1'
                } else {
                    this.formInline.isSkip = '2'
                }
                // 处理经营期限
                if (this.formInline.businessLicenseEndDate == '长期') {
                    this.radiodDate = '2'
                    this.$set(this.formInline, 'qxDate', '')
                } else {
                    this.radiodDate = '1'
                    // this.formInline.qxDate = res.result.businessLicenseEndDate
                    this.$set(this.formInline, 'qxDate', res.result.businessLicenseEndDate) //用this.$set修复让回显该时间时重新选择时间页面不生效问题
                }
                //处理店铺地址
                this.mapAddress = res.result.locateAddress
                //处理所属区域回显
                let regionAvalue = [];
                regionAvalue.push(res.result.merchantProvince);
                regionAvalue.push(res.result.merchantCity);
                regionAvalue.push(res.result.merchantArea);
                regionAvalue.join(",");
                this.formInline.regionAvalue = regionAvalue;
                this.formInline.merchantProvince = res.result.merchantProvince
                this.formInline.merchantCity = res.result.merchantCity
                this.formInline.merchantArea = res.result.merchantArea
                // 处理店铺类型回显
                let shopAvalue = [];
                shopAvalue.push(res.result.shopTypeParent);
                shopAvalue.push(res.result.shopType);
                shopAvalue.join(",");
                this.formInline.shopAvalue = shopAvalue;
                // 处理营业日期
                if (this.formInline.weekTime == '周一至周日') {
                    this.checkAll = true
                    this.checkedCities = this.cities
                } else {
                    var singleTime = ''
                    singleTime = this.formInline.weekTime.split('、')
                    this.isIndeterminate = singleTime.length > 0 && singleTime.length < this.cities.length;
                    this.checkedCities = singleTime
                }
                //备用结算信息
                this.formInline.localStandBankName = res.result.localStandBankName
                this.formInline.localStandBankSubName = res.result.localStandBankSubName
                this.formInline.standBankCity = res.result.standBankCity
                this.formInline.standBankProvince = res.result.standBankProvince
                this.getBankBranchsStand()
                this.formInline.standBankSubCode = res.result.standBankSubCode
                this.formInline.standStlAccNo = res.result.standStlAccNo
                // this.formInline.standBankRegionAvalue = []
                if(this.formInline.merchantType=='1' && this.formInline.settleBankType=='2' && res.result.standBankProvince!=''){
                    let standBankRegionAvalue = [];
                    standBankRegionAvalue.push(res.result.standBankProvince);
                    standBankRegionAvalue.push(res.result.standBankCity);
                    standBankRegionAvalue.join(",");
                    this.formInline.standBankRegionAvalue = standBankRegionAvalue;
                }else{
                    // this.$set(this.formInline,'standBankRegionAvalue',[])
                    this.formInline.standBankRegionAvalue = []
                }
            });
        },
        //数据处理
        dataProcessing() {
            this.formInline.merchantProvince = this.formInline.regionAvalue[0]
            this.formInline.merchantCity = this.formInline.regionAvalue[1]
            this.formInline.merchantArea = this.formInline.regionAvalue[2]
            this.formInline.shopTypeParent = this.formInline.shopAvalue[0] //店铺类型父类型
            this.formInline.shopType = this.formInline.shopAvalue[1] //店铺类型子类型
            this.shopTypeLs.forEach((item) => {
                item.children.forEach((items) => {
                    if (items.id == this.formInline.shopAvalue[1]) {
                        this.formInline.shopTypeName = items.label //店铺类型子类型名称
                    }
                })
            })
            if (this.formInline.settleBankType == '' || this.formInline.settleBankType == undefined) {
                this.formInline.isSkip = '1'
            } else {
                this.formInline.isSkip = '2'
            }
        },
        //新增保存
        sumitAdd(formName) {
            console.log('this.this.formInline',this.formInline)
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.dataProcessing()
                    const params = {
                        ...this.formInline,
                        chainId: this.chainId,
                    };
                    this.buttonLoading = true;
                    shopApplyAdd(params)
                        .then((res) => {
                            this.$message({
                                message: "添加成功",
                                type: "success",
                                duration: 1500,
                            });
                            this.$emit('success')
                            this.handleClose()
                            this.buttomLoading = false;
                        })
                        .catch(() => {
                            this.buttonLoading = false;
                        });
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        //编辑
        clickEdit(formName) {
            console.log('this.this.formInline',this.formInline)
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.dataProcessing()
                    const params = {
                        ...this.formInline,
                        chainId: this.chainId,
                    };
                    this.buttonLoading = true;
                    shopApplyUpdate(params)
                        .then((res) => {
                            this.$message({
                                message: "修改成功",
                                type: "success",
                                duration: 1500,
                            });
                            this.$emit('success')
                            this.handleClose()
                            this.buttomLoading = false;
                        })
                        .catch(() => {
                            this.buttonLoading = false;
                        });
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        getBankCitys() { //中台查询银盛城市
            let params = {}
            bankCity(params).then((res) => {
            this.bankCityOptions = res.result;
            this.bankCityOptions.forEach((item) => {
                item.children.forEach((items) => {
                    if (items.children.length == 0) {
                        items.children = null
                    }
                })
            })
            });
        },
        // 查询备用匹配开户行
        openingBankStand(e){
            var params = {
                bankCardNo:e
            }
            this.mateLoading = true
            entryV1FuncYSBankBin(params).then(res=>{
                var {bankName} = res.result
                if(bankName!= ''){
                    this.formInline.localStandBankName = bankName
                    // this.depositFrom.bankType = bankType
                    this.$message({ message: "查询成功", type: "success", duration: 1500,});
                    this.mateLoading = false
                }else{
                    this.$message({ message:'未查询到银行卡开户行相关信息', type: "error", duration: 1500,});
                    this.mateLoading = false
                }
            }).catch(()=>{
                this.mateLoading = false
            })
        },
        //备用银行区域选择
        standBankRegionChange(value){
            console.log(value)
            if (value.length == 0) {
            this.formInline.standBankRegionAvalue = []
            this.formInline.standBankSubCode = '';
            this.formInline.localStandBankSubName = '';
            this.bankOptiontwoStand = []
            return
            }
            this.formInline.standBankProvince = value[0];
            this.formInline.standBankCity = value[1];
            if (this.formInline.localStandBankName == '') {
            this.$message.error('请输入开户行名称');
            this.$refs['standBankRegionAvalueRef'].clearValidate();
            this.formInline.standBankRegionAvalue = []
            this.formInline.standBankSubCode = '';
            this.formInline.localStandBankSubName = '';
            this.bankOptiontwoStand = []
            return
            } else {
                this.formInline.standBankRegionAvalue = [value[0],value[1]]
                this.$refs['standBankRegionAvalueRef'].clearValidate();
                this.getBankBranchsStand()
            }
            console.log('this.formInline.standBankRegionAvalue',this.formInline.standBankRegionAvalue)
            this.formInline.standBankSubCode = '';
            this.formInline.localStandBankSubName = '';
        },
        getBankBranchsStand() { //获取备用支行信息
            const params = {
                bankName: this.formInline.localStandBankName,
                cityId: this.formInline.standBankCity,
                provinceId: this.formInline.standBankProvince
            };
            this.viewLoading = true
            bankBranch(params).then((res) => {
                this.bankOptiontwoStand = res.result
                this.viewLoading = false
            })
            .catch(() => {
                this.viewLoading = false;
            });
        },
        //备用支行选择
        changesTwoStand(id) {
            //支行选择
            this.bankOptiontwoStand.map((item, index) => {
            if (id == item.bankCode) {
                this.formInline.standBankSubCode = item.bankCode;
                this.formInline.localStandBankSubName = item.bankName;
            }
            });
        },
        handleClose() {
            this.$emit("update:visible", false);
        },
        //跳转经纬度查询地址
        guUrl(){
            window.open('https://lbs.qq.com/tool/getpoint/get-point.html', '_blank')
        },
    },
};
</script>
<style lang="scss" scoped>
.button_box {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 50px;
}

.title_txt {
    margin: 10px 0;
    color: #333333;
    font-weight: bold;
    font-size: 16px;
    border-bottom: 2px solid #1890FF;
    padding-bottom: 10px;
}

.dialog_bottom {
    padding-top: 20px;
}
.standby_txt{
    font-size: 14px;
    color: #1890ff;
    margin: 0 0 10px 40px;
}
</style>
  